<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				text-decoration: none;
				list-style-type: none;
			}
			
			.nav ul {
				overflow: hidden;
			}
			
			.nav ul li {
				width: 200px;
				height: 60px;
				line-height: 60px;
				text-align: center;
				background-color: pink;
				display: block;
				float: left;
			}
			
			.nav ul li:hover {
				border-bottom: 3px solid black;
			}
			
			.goods ul {
				display: none;
			}
			
			.goods .active {
				display: block;
			}
		</style>
	</head>

	<body>
		<div class="header">
			<!--nav-->
			<div class="nav" id="navid">
				<ul>
					<li>CPU</li>
					<li>computer</li>
					<li>notebook_PC</li>
				</ul>
			</div>

			<!--goods-->
			<div class="goods" id="goods">
				<ul class="">
					<div>
						<li><img src="img/2.png" />CPU</li>
						<li><img src="img/2.png" />CPU</li>
					</div>
				</ul>

				<ul>
					<li><img src="img/3.png" />computer</li>
					<li><img src="img/3.png" />computer</li>
					<li><img src="img/3.png" />computer</li>
					<li><img src="img/3.png" />computer</li>
					<li><img src="img/3.png" />computer</li>
					<li><img src="img/3.png" />computer</li>
					<li><img src="img/3.png" />computer</li>
					<li><img src="img/3.png" />computer</li>
					<li><img src="img/3.png" />computer</li>
				</ul>

				<ul>
					<li><img src="img/6.png" />notebook_PC</li>
					<li><img src="img/6.png" />notebook_PC</li>
					<li><img src="img/6.png" />notebook_PC</li>
					<li><img src="img/6.png" />notebook_PC</li>
					<li><img src="img/6.png" />notebook_PC</li>
					<li><img src="img/6.png" />notebook_PC</li>
					<li><img src="img/6.png" />notebook_PC</li>
					<li><img src="img/6.png" />notebook_PC</li>
					<li><img src="img/6.png" />notebook_PC</li>
					<li><img src="img/6.png" />notebook_PC</li>
					<li><img src="img/6.png" />notebook_PC</li>
					<li><img src="img/6.png" />notebook_PC</li>
					<li><img src="img/6.png" />notebook_PC</li>
					<li><img src="img/6.png" />notebook_PC</li>
					<li><img src="img/6.png" />notebook_PC</li>
					<li><img src="img/6.png" />notebook_PC</li>
					<li><img src="img/6.png" />notebook_PC</li>
				</ul>

			</div>

	</body>

	<script type="text/javascript">
		window.onload = function() {

			var navid = document.getElementById('navid').getElementsByTagName('li');
			console.log(navid);

			for(var i = 0; i < navid.length; i++) {
				navid[i].onclick = function__;
			}

			function function__() {
				var tags = document.getElementById('goods').getElementsByTagName('ul');
				console.log(tags);

				for(var i = 0; i < tags.length; i++) {
					if(navid[i] === this) {
						tags[i].className = 'active';
					}else{
						tags[i].className = '';
					}
				}
			}
		}
		
	</script>

</html>